<template lang="html">
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <el-main class="feature-tabs">
      <div class="wrapper-box">
        <div class="dis">
          <div class="goods-list-image">
            <div class="mobile-nav">
              <img class="mobile-header-image" src="../../../../assets/micro-page/micro-create-header.png">
              <div v-if="tabConfig.type <= 2" class="mobile-footer" :style="{backgroundColor:tabConfig.backgroundColor,color:tabConfig.defaultColor}">
                <div class="dis al_item dis_ju" v-for="(item,index) in tabConfig.list" :key="index" :class="'mode-type-'+tabConfig.type">
                  <div :class="{'dis al_item':tabConfig.type === 1}">
                    <!-- <img v-if="tabConfig.type === 1 ? index === 0 : true" class="image"  src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/shop/imgs/tabbar/home_s4_c0.png" alt=""> -->
                    <svg class="icon-size" aria-hidden="true">
                      <use :xlink:href=item.icon></use>
                    </svg>
                    <!-- <span v-if="tabConfig.type === 1 && index !== 0" class="el-icon-notebook-2 menu-list-icon"></span> -->
                    <!-- 3类型没有文本  -->
                    <div v-if="tabConfig.type === 2 || (tabConfig.type === 1 && index !== 0)" class="item-title">{{ item.title }}</div>
                  </div>
                </div>
              </div>
              <!-- 展开形式 -->
              <template v-else>
                <div v-if="tabConfig.type === 3" class="navbar">
                  <div class="dis al_item dis_ju navbar-content">
                    <i class="el-icon-circle-plus-outline"></i>
                  </div>
                  <div class="op-menu">
                    <div class="dis al_item dis_ju op-menu-item" v-for="(item,index) in tabConfig.list" :key="index" >
                      <div class="op-menu-content" :style="{backgroundColor:tabConfig.backgroundColor}">
                        <!-- <span class="icon-tab" :class="item.icon"></span> -->
                        <svg class="icon-size" aria-hidden="true">
                          <use :xlink:href=item.icon></use>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>

                <div v-if="tabConfig.type === 4" class="pos_a open-col" :style="{backgroundColor:tabConfig.backgroundColor}">
                  <div class="pos_a col-icon-con left-ico">
                    <!-- <span class="icon-tab" :class="tabConfig.list[0].icon"></span> -->
                    <svg class="icon-size" aria-hidden="true">
                      <use :xlink:href=tabConfig.list[0].icon></use>
                    </svg>
                  </div>
                  <div class="pos_a dis al_item dis_ju navbar-content" :style="{borderColor:tabConfig.backgroundColor}"><i class="el-icon-circle-plus-outline"></i></div>
                  <div v-if="tabConfig.list.length>=2" class="pos_a col-icon-con right-ico">
                    <!-- <span class="icon-tab" :class="tabConfig.list[1].icon"></span> -->
                    <svg class="icon-size" aria-hidden="true">
                      <use :xlink:href=tabConfig.list[1].icon></use>
                    </svg>
                  </div>
                  <template v-if="tabConfig.list.length>=3">
                    <div class="must-type">
                      <template v-for="(item,index) in tabConfig.list">
                        <div v-if="index >= 2" class="pos_a dis al_item dis_ju open-top-ico" :class="'open-top-'+index" :key="index" :style="{backgroundColor:tabConfig.backgroundColor}">
                          <!-- <span class="icon-tab" :class="item.icon"></span> -->
                          <svg class="icon-size" aria-hidden="true">
                            <use :xlink:href=item.icon></use>
                          </svg>
                        </div>
                      </template>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </div>
          <div class="flex_1">
            <div class="mobile-config">
              <!--              <div class="dis al_item is-main">
                              <span class="is-main-title">主导航</span>
                              <el-switch v-model="tabConfig.main"></el-switch>
                              <span class="color-9797A1">{{tabConfig.main ? '开启' : '关闭' }}</span>
                            </div>
                            <div class="nav-tip">发布后小程序需提交审核通过后方可生效；H5可立即生效。</div>-->
              <div class="bg-white-panel">底部导航配置</div>
              <span class="iconfont icon-shouye-xuanzhong"></span>
              <div class="bg-white-panel dis al_item">
                <div class="pa-title">导航栏配色</div>
                <el-color-picker v-model="tabConfig.backgroundColor"></el-color-picker>
                <div class="dis al_item" style="margin-left: 40px">
                  <div class="pa-title">字体颜色</div>
                  <div class="select-color  dis al_item">
                    <div class="color-circle" :style="{backgroundColor:tabConfig.activeColor}"></div>
                    <div class="color-circle" :style="{backgroundColor:tabConfig.defaultColor}"></div>
                    <el-popover ref="popHead" placement="bottom" width="250" trigger="click">
                      <div class="color-pop-box">
                        <div class="color-title">文本选中状态</div>
                        <div class="dis al_item" style="margin-bottom: 10px;">
                          <span style="margin-right: 20px">选中</span>
                          <div class="dis al_item">
                            <div v-for="(item, index) in ['#e64b3b','#ef84ab','#f09038','#454545']" :key="index" class="color-style-item" :style="{backgroundColor: item}" @click="handlerChooseActiveColor('activeColor', item)">
                              <i v-if="item === tabConfig.activeColor" class="el-icon-check"></i>
                            </div>
                          </div>
                        </div>
                        <div class="dis al_item" style="margin-bottom: 10px;">
                          <span style="margin-right: 20px">未选</span>
                          <div class="dis al_item">
                            <div v-for="(item, index) in ['#b2b1af','#f3f3f3','#333333']" :key="index" class="color-style-item" :style="{backgroundColor: item}" @click="handlerChooseActiveColor('defaultColor', item)">
                              <i v-if="item === tabConfig.defaultColor" class="el-icon-check"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div slot="reference" class="main-color">修改</div>
                    </el-popover>
                  </div>
                </div>
              </div>
              <div class="bg-white-panel dis al_item dis_ju_spb" @click="handleChangeModel">
                <div>导航栏样式</div>
                <div class="cursor menu-model dis al_item">
                  <div class="font_w">样式{{['一','二','三','四'][tabConfig.type-1]}}</div>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div>
                <draggable :list="tabConfig.list" :move="dragOnMove" ghost-class="ghost" filter=".forbid">
                  <div v-for="(item,index) in tabConfig.list" :key="index" class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item" @click="item.visible = !item.visible">
                        <span>导航{{ index + 1 }}</span>
                      </div>
                      <span v-if="index !== 0 && tabConfig.list.length>2" class="cursor el-icon-error" @click.stop="tabConfig.list.splice(index,1)"
                      ></span>
                    </div>
                    <div v-if="item.visible" class="item-content">
                      <el-form :model="item" label-width="50px">
                        <el-form-item class="person-center-form-item" label="名称">
                          <el-input style="width: 240px" show-word-limit maxlength="4" size="small" v-model="item.title"></el-input>
                        </el-form-item>
                        <el-form-item class="person-center-form-item" label="链接">
                          <span v-if="index === 0">首页</span>
                          <el-input v-else style="width: 240px" size="small" v-model="item.link">
                            <span class="cursor" slot="append" @click="linkClick(index)">修改</span>
                          </el-input>
                        </el-form-item>
                        <el-form-item class="person-center-form-item" label="图标">
                          <div class="dis al_item">
                            <div class="cursor selected-demo" :style="{color:tabConfig.activeColor}" @click="selectedClick(index,true)">
                              <!-- <i class="icon-img" :class="item.icon"></i> -->
                              <svg class="icon-size" aria-hidden="true">
                                <use :xlink:href=item.icon></use>
                              </svg>
                            </div>
                            <div class="cursor unselected-demo" :style="{color:tabConfig.defaultColor}" @click="unselectedClick(index,false)">
                              <!-- <i class="icon-img" :class="item.icon"></i> -->
                              <svg class="icon-size" aria-hidden="true">
                                <use :xlink:href=item.iconA></use>
                              </svg>
                            </div>
                          </div>
                        </el-form-item>
                        <div class="add-child-menu">
                          <div v-if="!item.child || (item.child && item.child.length<maxChildTabNum)" class="add-nav-item child-menu" @click="handleAddChildTab(item)">
                            添加二级导航
                            <template v-if="item.child">
                              ({{ item.child.length }}/{{ maxChildTabNum }})
                            </template>
                          </div>
                          <!--  以下为二级导航列表   -->
                          <template v-if="item.child && item.child.length">
                            <draggable :list="item.child" ghost-class="ghost">
                              <div v-for="(childItem,childIndex) in item.child" :key="childIndex" class="pos_r child-menu-item">
                                <el-form-item class="person-center-form-item" label="名称">
                                  <el-input style="width: 240px" show-word-limit maxlength="4" size="small" v-model="childItem.title"></el-input>
                                </el-form-item>
                                <el-form-item class="person-center-form-item" label="链接">
                                  <el-input style="width: 240px" size="small" v-model="childItem.link" >
                                    <span class="cursor" slot="append" @click="linkClick()">修改</span>
                                  </el-input>
                                </el-form-item>
                                <el-form-item class="person-center-form-item" label="图标">
                                  <div class="dis al_item">
                                    <div class="selected-demo" :style="{color:tabConfig.activeColor}" @click="selectedClick(index,true,childIndex)">
                                      <!-- <i class="icon-img" :class="childItem.icon"></i> -->
                                      <svg class="icon-size" aria-hidden="true">
                                        <use :xlink:href=childItem.icon></use>
                                      </svg>
                                    </div>
                                    <div class="unselected-demo" :style="{color:tabConfig.defaultColor}" @click="unselectedClick(index,false,childIndex)">
                                      <!-- <i class="icon-img" :class="childItem.icon"></i> -->
                                      <svg class="icon-size" aria-hidden="true">
                                        <use :xlink:href=childItem.iconA></use>
                                      </svg>
                                    </div>
                                  </div>
                                </el-form-item>
                                <i @click.stop="item.child.splice(childIndex,1)" class="pos_a cursor el-icon-circle-close"></i>
                              </div>
                            </draggable>
                          </template>
                        </div>
                      </el-form>
                    </div>
                  </div>
                </draggable>
                <div v-if="tabConfig.list.length<maxTabNum" class="add-nav-item" @click="handleAddTab">添加导航({{tabConfig.list.length}}/{{maxTabNum}})</div>
              </div>
            </div>
          </div>
        </div>
        <div class="save-data">
          <el-button type="primary" size="mini" @click="save">保存</el-button>
        </div>
      </div>
    </el-main>
    <el-dialog title="选择导航模板" :visible.sync="dialogVisible" width="500px">
      <div style="margin-bottom: 5px" v-for="(item,index) in ['微信公众号', 'APP导航模板', 'Path展开形式导航', '两侧展开形式导航']">
        <el-radio v-model="currentChooseModel" :label="index+1" border> {{ item }}</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleChooseModel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择图标 -->
    <el-dialog title="选择图标" :visible.sync="isDialogIcon" width="45%">
      <iconFont @iconBox="iconBox" v-if="isICon" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogIcon = false">取 消</el-button>
        <el-button type="primary" @click="iconChooseModel">确 定</el-button>
      </span>
    </el-dialog>
    <!--选择微页面-->
    <el-dialog custom-class="up-dialog" :close-on-click-modal="false" :modal="false" top="5vh"  title="页面选择" :visible.sync="dialogChoosePages" width="55%">
      <choose-feature :is-get-choose-data="isGetChooseFeature" @chooseChooseFeaturesFun="chooseChooseFeaturesFun" />
      <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
        <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
        <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Index from './index'
export default Index
</script>
<style lang="scss">
.icon-size {
    height: 20px;
    width: 20px;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.el-form .el-form-item {
  &.person-center-form-item {
    margin-bottom: 5px !important;
  }
}
.person-center-form-item {
  font-size: 12px;
  .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
    font-size: 12px;
  }
}
</style>
<style lang="scss" scoped>
@import "index";
</style>
